<template>
	<section class="list">
		<div class="banner"><img src="../../assets/goodList_bannner.jpg"/></div>
		<div class="banner_mobile"><img src="../../assets/goodList_bannner_mobile.jpg"/></div>
		<h3 class="nametitle">{{title}}</h3>
		<aside class="listMain">
			<ul>
				<li v-for="(item,index) in tableDate" v-if="tableDate && tableDate.length>0">
					<router-link :to="{path:'goodDetail',query:{id:item.id,title:item.name}}">
						<span class="number">{{item.productNo}}</span>
						<span class="zh_name">{{item.name}}</span>
						<span class="en_name">{{item.enName}}</span>
					</router-link>
				</li>
			</ul>
		</aside>
		<div v-show="allPageSize>1">
			<mo-pages :page-index="pageNumber" :total="total" :page-size="pageSize" @change="pageChange"></mo-pages>
		</div>
	</section>
</template>

<script>
	import moPages from "@/components/pages"
	export default{
		components:{
			moPages:moPages
		},
		data (){
			return {
				title:"商标分类",
				pageNumber:1,
				pageSize:12,
				total:'',//总的条数
				tableDate:[],
				allPageSize:'',
			}
			
		},
		created(){
			this.setTitle();
			this.setActive();
			this.getProduct();
		},
		methods:{
			setTitle(){
				//设置上面的标题
				this.$emit("getTitle",this.title);
			},
			setActive(){
				//设置左侧的菜单高亮
				this.$root.Bus.$emit("nowActive","02")
			},
			getProduct(){
				this.$ajax.get(this.global.url+"/api/user/tradeCatagroy?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize).then(res=>{
					let data=res.data;
					this.tableDate=[];
					if(data.code==200){
						if(data.data && data.data.records){
							this.tableDate=data.data.records;
						}
						this.total=data.data.total;
						this.allPageSize=data.data.pages;
					}
					else{
							this.total=0;
						}
				}).catch(error=>{
					console.log(error);
				})
			},
			pageChange(page){
				this.pageNumber=page;
				this.getProduct();
			}
		}
	}
</script>

<style scoped>
	.list{
		padding: 1.5rem 5% 1.5rem 2%;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	.banner{
		width:100%;
	}
	.banner img{
		width:100%;
		height:auto;
	}
	.listMain ul{
		overflow: hidden;
		margin-top:1.5rem;
	}
	.listMain li{
		margin-right: 1.2%;
		width:15.667%;
		height:11rem;
		float: left;
		margin-bottom: 20px;
		
	}
	.listMain li:nth-child(6n){
		margin-right:0px;
	}
	.listMain li a{
		display: block;
		width:100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		/*justify-content: center;*/
		background: #fff;
		border-radius: 3px;
		border-bottom:3px solid #4a3b63;
	}
	.number{
		width:5.1rem;
		height:5.1rem;
		line-height: 5.1rem;
		text-align:center;
		font-size: 1.5rem;
		color:#4a3b63;
		font-weight: bold;
		border-radius: 50%;
		background: url(../../assets/goodList_bj.png) no-repeat center center;
		background-size: cover;
		margin-top: 1rem;
		overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.zh_name{
		font-size: 0.8rem;
		color:#555555;
		margin-top: 0.8rem;
		line-height:1.1rem;
		max-width: 90%;
	    height: 1.1rem;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.en_name{
		font-size:0.7rem;
		color:#cbcbcb;
		line-height: 0.8rem;
		margin-top: 3px;
		max-width: 90%;
		height: 0.8rem;
		overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.banner_mobile{
		width:100%;
		display: none;
	}
	.banner_mobile img{
		width: 100%;
	}
	.nametitle{
		font-size: 1.5rem;
		color:#53306c;
		text-align: center;
		line-height: 2.5rem;
		margin-bottom: 1.5rem;
		margin-top:1.5rem;
		display: none;
	}
	@media only screen and (min-width:1441px) and (max-width:1560px) {
		.listMain li{
			width:19.04%;
		}
		.listMain li:nth-child(6n){
			margin-right: 1.2%;
		}
		.listMain li:nth-child(5n){
			margin-right:0px;
		}
		
	}
	@media only screen and (min-width:1200px) and (max-width:1440px){
		.listMain li{
			width:24.1%;
		}
		.listMain li:nth-child(6n){
			margin-right: 1.2%;
		}
		.listMain li:nth-child(4n){
			margin-right:0px;
		}
		
	}
	@media only screen and (min-width:960px) and (max-width:1199px){
		.listMain li{
			width:32.533%;
		}
		.listMain li:nth-child(6n){
			margin-right: 0px;
		}
		.listMain li:nth-child(3n){
			margin-right:0px;
		}
		
	}
	@media only screen and (min-width:360px) and (max-width:959px){
		.listMain li{
			width:49.4%;
		}
		.listMain li:nth-child(2n){
			margin-right:0px;
		}
	}
	@media only screen and (min-width:960px) and (max-width:1440px){
		.list{
			padding:1.5rem 2rem;
		}
	}
	@media only screen and (min-width: 320px) and (max-width: 959px) {
		.list{
			padding: 0px 0px 1.5rem 0px;
		}
		.listMain{
			padding: 0px 1.5rem;
		}
		.nametitle{
			display: block;
		}
		.banner{
			display: none;
		}
		.banner_mobile{
			display: block;
		}
	}
</style>